<template>
  <div class="box-addPages" :style="computedShow" @click="maskTap">
    <div
      class="addPages"
      :style="computedPagesStyle"
      @click="addPagesTap"
      v-on:click.stop="doThis"
    >
      <!--设备录入-添加页面-->
      <template v-if="showCommonDeviceAddView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center" />
                </div>
                <div style="margin-left: 10px">添加设备</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close" />
              </div>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">设备序列号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="addImei"
                  placeholder="请输入设备序列号"
                />
              </template>
            </div>
            <div
              class="box-item"
              style="display: flex; justify-content: flex-end"
            >
              <a-button @click="addDevice">确定</a-button>
              <a-button @click="hideAddPages">取消</a-button>
            </div>
          </div>
        </div>
      </template>
      <!--设备录入-编辑页面-->
      <template v-if="showCommonDeviceEditView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center" />
                </div>
                <div style="margin-left: 10px">编辑设备</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close" />
              </div>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">设备序列号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="editImei"
                  :disabled="true"
                  placeholder="设备序列号"
                />
              </template>
            </div>
            <!--新增部分-->
            <div
              class="flexCommon"
              style="justify-content: flex-start; margin: 20px 0"
            >
              <div>停车点</div>
              <template>
                <a-select
                  style="margin: 0 50px 0 10px; width: 200px"
                  placeholder="选择停车点"
                  optionFilterProp="children"
                  @select="selectParks"
                  v-model="selectedPark"
                >
                  <a-select-option v-for="p in parks" :key="p.id"
                    >{{ p.parkName }}
                  </a-select-option>
                </a-select>
              </template>
              <div>车位号</div>
              <template>
                <a-select
                  style="margin: 0 00px 0 10px; width: 200px"
                  showSearch
                  placeholder="选择车位号"
                  optionFilterProp="children"
                  @select="selectSpace"
                  v-model="selectedSpace"
                >
                  <a-select-option v-for="s in spaces" :key="s.id" :value="s.id"
                    >{{ s.truckSpaceName }}
                  </a-select-option>
                </a-select>
              </template>
            </div>

            <div
              class="box-item"
              style="display: flex; justify-content: flex-end"
            >
              <a-button @click="editDevice">确定</a-button>
              <a-button @click="hideAddPages">取消</a-button>
            </div>
          </div>
        </div>
      </template>
      <!--设备录入-批量导入excel-->
      <template v-if="showCommonDeviceImportExcelView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center"/>
                </div>
                <div style="margin-left: 10px">编辑设备</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close"/>
              </div>
            </div>

            <!--新增部分-->
            <div class="flexCommon" style="justify-content: flex-start; margin: 20px 0">
              <div>停车点</div>
              <template>
                <a-select
                        style="margin: 0 50px 0 10px; width: 200px"
                        placeholder="选择停车点"
                        optionFilterProp="children"
                        v-model="selectedCommonDeviceImportExcel"
                        onchange="import()"
                >
                  <a-select-option v-for="p in parks" :key="p.id"
                  >{{ p.parkName }}
                  </a-select-option>
                </a-select>

              <br/><br/>
              </template>
            </div>
            <div class="flexCommon" style="justify-content: flex-start; margin: 30px 0">
              <template>
                <!-- 上传 -->
                <div class="itemText2">文件</div>
                <a-upload style="display:inline;"
                        :fileList="commonDeviceImportFileList"
                        :remove="handleRemove3"
                        :beforeUpload="beforeUpload3"
                        :list-type="false"
                        :multiple="false">
                  <a-button>
                    <a-icon type="upload"/>
                    上传
                  </a-button>
                </a-upload>
              </template>
            </div>
            <div>
              <span id="commonDeviceMessage"></span>
            </div>
            <div class="box-item" style="display: flex; justify-content: space-evenly; margin: 30px 25px">
              <a-button  @click="importFileList">批量导入</a-button>
              <a-button @click="hideAddPages">关闭</a-button>
            </div>
          </div>
        </div>
      </template>
      <!--收费规则-添加-->
      <template v-if="showStandardAddView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center" />
                </div>
                <div style="margin-left: 10px">收费标准</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close" />
              </div>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">标准名称</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px; width: 200px"
                  v-model="addStandardName"
                  placeholder="例如：白天小车收费每次5元"
                />
              </template>
            </div>
            <div
              class="box-item"
              style="display: flex; justify-content: flex-end"
            >
              <a-button @click="addStandard">确定</a-button>
              <a-button @click="hideAddPages">取消</a-button>
            </div>
          </div>
        </div>
      </template>
      <!--车型-添加/编辑-->
      <template v-if="showCarTypeEditView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>编辑组织车型</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <a-table
              :columns="carTypeColumns"
              :dataSource="carTypeDataSource"
              bordered
              size="small"
              :customRow="tableCustomRow"
              :rowClassName="setRowClassName"
              :pagination="nopagination"
            >
              <template slot="deleteOperation" slot-scope="text, record">
                <a-popconfirm
                  title="删除车型可能影响收费，确认是否删除？"
                  okText="确认"
                  cancelText="取消"
                  @confirm="deleteCarType(record)"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
          <div class="viewItem">
            <div class="itemText">车型</div>
            <template>
              <a-input v-model="addCarTypeName" placeholder="车型名称" />
            </template>
            <template>
              <a-button icon="plus-circle" @click="addCarTypeClick" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--特殊车牌-添加-->
      <template v-if="showPlateAddView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>内部车辆添加</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText">车牌</div>
            <template>
              <a-input v-model="inputPlate" placeholder="例如：京A88888" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">车主姓名</div>
            <template>
              <a-input v-model="inputCarOwnerName" placeholder="车主姓名" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">联系方式</div>
            <template>
              <a-input v-model="inputPhone" placeholder="联系方式" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="savePlateManage">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--特殊车牌-编辑-->
      <template v-if="showPlateEditView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>内部车辆编辑</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText">车牌</div>
            <template>
              <a-input v-model="inputPlate" placeholder="例如：京A88888" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">车主姓名</div>
            <template>
              <a-input v-model="inputCarOwnerName" placeholder="车主姓名" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">联系方式</div>
            <template>
              <a-input v-model="inputPhone" placeholder="联系方式" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="savePlateManage">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--车牌纠正-派遣-->
      <template v-if="showDispatchView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>识别结果现场处置</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText">停车点</div>
            <template>
              <a-input :disabled="inputDisabled" :value="inputPark" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">处置人</div>
            <template>
              <a-select
                style="margin: 0 10px 0 0; width: 200px"
                showSearch
                placeholder="请选择处置人"
                @select="selectWorker"
              >
              </a-select>
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="hideAddPages">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--白名单管理-添加白名单-->
      <template v-if="showWhiteListAddView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>添加白名单</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <template>
              <div class="itemText">名单类型</div>
              <a-select
                style="margin: 0 50px 0 0px; width: 200px"
                showSearch
                placeholder="名单类型"
                optionFilterProp="children"
                @select="selectType"
                :allowClear="true"
              >
                <a-select-option
                  v-for="p in this.type"
                  :key="p.id"
                  :value="p.name"
                  :aria-selected="p.flag"
                  >{{ p.name }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="viewItem">
            <template>
              <div class="itemText">停车点</div>
              <a-select
                style="margin: 0 50px 0 0px; width: 200px"
                showSearch
                mode="multiple"
                :maxTagCount="5"
                placeholder="选择停车点"
                optionFilterProp="children"
                v-model="selectParksName"
                @change="parksNameChange"
                :allowClear="true"
              >
                <a-select-option
                  v-for="p in parksName"
                  :key="p.id"
                  :value="p.parkName"
                  >{{ p.parkName }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">是否生效</div>
            <template>
              <a-select
                style="margin: 0 50px 0 0px; width: 200px"
                showSearch
                placeholder="是否生效"
                optionFilterProp="children"
                @select="selectValid"
                :allowClear="true"
              >
                <a-select-option
                  v-for="p in this.valid"
                  :key="p.id"
                  :value="p.name"
                  >{{ p.name }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">时间设置</div>
            <template>
              <div style="margin: 0 50px 0 0px; width: 200px">
                <a-range-picker
                  :showTime="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  @ok="onOk"
                  @change="onChange"
                  :value="rangePicker()"
                />
              </div>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">车牌号</div>
            <div style="margin: 0 50px 0 0px; width: 200px">
              <a-input placeholder="车牌号" v-model="licencePlate" />
            </div>
          </div>
          <div class="viewItem">
            <div class="itemText">备注</div>
            <div style="margin: 0 50px 0 0px; width: 200px">
              <a-textarea placeholder="备注" v-model="note" />
            </div>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="addWhiteList">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--白名单管理-导入白名单-->
      <template v-if="showWhiteListBitchAddView">
        <div class="viewItem">
            <div class="itemText">停车点</div>
            <a-select style="margin: 0 50px 0 0px; width: 200px"
                      showSearch
                      mode="multiple"
                      placeholder="选择停车点"
                      optionFilterProp="children"
                      v-model="addLists.parksNameList"
                      :allowClear="true"
            >
              <a-select-option v-for="p in parksName" :key="p.id" :value="p.parkName">{{p.parkName}}
              </a-select-option>
            </a-select>
          <br/><br/>
          <div class="itemText">导入数据</div>
          <a-upload :file-list="fileList" :remove="handleRemove2" :before-upload="beforeUpload2">
            <a-button> <a-icon type="upload" /> 选择文件 </a-button>
          </a-upload>
          <a-button
                  type="primary"
                  :disabled="fileList.length === 0"
                  :loading="uploading"
                  style="margin-top: 16px"
                  @click="handleUpload"
          >
            {{ uploading == true ? '加载' : '导入' }}
          </a-button>
        </div>
      </template>
      <!--黑名单管理-添加黑名单-->
      <template v-if="showBlacklistAddView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>添加黑名单</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText">车牌号</div>
            <template>
              <a-input placeholder="车牌号" v-model="inputPlate" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">原因</div>
            <template>
              <a-textarea placeholder="原因" v-model="inputReson" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="addBlackPlate">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--上传版本-->
      <template v-if="showUploadVersionFileView">
        <div class="viewHead2">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <template v-if="operateSign == 1">
                <div>添加</div>
              </template>
              <template v-else-if="operateSign == 2">
                <div>编辑</div>
              </template>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody2">
          <div class="viewItem">
            <div class="itemText2">文件</div>
            <template>
              <a-upload
                :fileList="uploadFileList"
                :remove="handleRemove"
                :beforeUpload="beforeUpload"
              >
                <a-button>
                  <a-icon type="upload" />
                  上传
                </a-button>
              </a-upload>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">设备型号</div>
            <template>
              <a-select
                style="margin: 0 50px 0 0px; width: 200px"
                placeholder="选择设备型号"
                optionFilterProp="children"
                :allowClear="true"
                v-model="selectModelCode2"
                :options="deviceOptions"
              />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">版本号</div>
            <template>
              <a-input
                v-model="inputVersionStr"
                placeholder="版本号"
                :disabled="operateSign == 2"
              />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">更新内容</div>
            <template>
              <a-textarea
                placeholder="更新内容"
                v-model="textareaUpdateContent"
              />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">禁止更新时间段</div>
            <template>
              <template>
                <a-time-picker format="HH:mm" v-model="timeStart" />
              </template>
              -
              <template>
                <a-time-picker format="HH:mm" v-model="timeEnd" />
              </template>
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="addAndUpdateUploadVersion">立即提交</a-button>
            <a-button @click="hideAddPages">取消</a-button>
          </template>
        </div>
      </template>
      <!--型号新增/编辑-->
      <template v-if="showEquipmentModelView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <template v-if="equipmentModelAdd">
                <div>型号添加</div>
              </template>
              <template v-else>
                <div>型号编辑</div>
              </template>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText">设备型号</div>
            <template>
              <a-input
                placeholder="设备型号"
                v-model="inputEquipmentModel"
                @pressEnter="addEquipmentModel"
              />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="addEquipmentModel">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--设备版本新增/编辑-->
      <template v-if="showEquipmentVersionView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <template v-if="operateSign == '1'">
                <div>添加</div>
              </template>
              <template v-else>
                <div>编辑</div>
              </template>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <div class="itemText2">设备号</div>
            <template>
              <a-input placeholder="请输入设备号" v-model="inputImei" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">设备型号</div>
            <template>
              <a-select
                style="margin: 0 10px 0 0px; width: 200px"
                showSearch
                placeholder="请选择型号"
                optionFilterProp="children"
                @select="selectEquipmentModel"
                :allowClear="allowClear"
                v-model="bindEquipmentModelAttr"
              >
                <a-select-option
                  v-for="e in equipmentModels"
                  :key="e.id"
                  :value="e.modelCode"
                >
                  {{ e.modelCode }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">停车点</div>
            <template>
              <a-select
                style="margin: 0 10px 0 0px; width: 200px"
                showSearch
                placeholder="选择停车点"
                optionFilterProp="children"
                @select="selectPark"
                :allowClear="allowClear"
                v-model="bindParkAttr"
                :disabled="true"
              >
                <a-select-option
                  v-for="p in parks"
                  :key="p.id"
                  :value="p.parkName"
                  >{{ p.parkName }}
                </a-select-option>
              </a-select>
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText2">最新支持版本</div>
            <template>
              <a-input
                placeholder="版本号"
                @click="chooseVersionClick"
                v-model="inputEquipmentVersion"
              />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="addAndEditEquipmentVersion">确定</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--阶梯收费栏目-->
      <template v-if="showStairsView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>阶梯收费</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <a-table
              :columns="stairColumns"
              :dataSource="stairDataSource"
              bordered
              size="small"
              :customRow="tableCustomRow"
              :rowClassName="setRowClassName"
              :pagination="nopagination"
            >
              <template slot="chargeSlot" slot-scope="text">
                {{ text / 100 }}
              </template>
              <template slot="deleteOperation" slot-scope="text, record">
                <a-popconfirm
                  title="确认删除？"
                  okText="确认"
                  cancelText="取消"
                  @confirm="deleteStair(record)"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
          <div class="viewItem">
            <div class="itemText">不超</div>
            <template>
              <a-input v-model="parkingMinute" placeholder="停车不超过N分钟" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">收费</div>
            <template>
              <a-input v-model="chargeOfYuan" placeholder="收费N元" />
            </template>
            <template>
              <a-button icon="plus-circle" @click="addStairClick" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="saveStairsClick">保存</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--阶梯收费栏目（平均每分钟）-->
      <template v-if="showStairsByAvgView">
        <div class="viewHead">
          <div class="viewItem">
            <div class="flexCommon">
              <a-icon type="align-center" />
              <div>阶梯收费</div>
            </div>
            <div class="close" @click="hideAddPages">
              <a-icon type="close" />
            </div>
          </div>
        </div>
        <div class="viewBody">
          <div class="viewItem">
            <a-table
              :columns="stairByAvgColumns"
              :dataSource="stairByAvgDataSource"
              bordered
              size="small"
              :customRow="tableCustomRow"
              :rowClassName="setRowClassName"
              :pagination="nopagination"
            >
              <template slot="chargeSlot" slot-scope="text">
                {{ text / 100 }}
              </template>
              <template slot="deleteOperation" slot-scope="text, record">
                <a-popconfirm
                  title="确认删除？"
                  okText="确认"
                  cancelText="取消"
                  @confirm="deleteStairByAvg(record)"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
          <div class="viewItem">
            <div class="itemText">时段内</div>
            <template>
              <a-input v-model="parkingMinute" placeholder="该时段N分钟内" />
            </template>
          </div>
          <div class="viewItem">
            <div class="itemText">收费</div>
            <template>
              <a-input v-model="chargeOfYuan" placeholder="平均每分钟收费N元" />
            </template>
            <template>
              <a-button icon="plus-circle" @click="addStairByAvgClick" />
            </template>
          </div>
        </div>
        <div class="viewTail">
          <template>
            <a-button @click="saveStairsByAvgClick">保存</a-button>
            <a-button @click="hideAddPages">关闭</a-button>
          </template>
        </div>
      </template>
      <!--诱导屏录入-添加页面-->
      <template v-if="showGuideScreenAddView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center" />
                </div>
                <div style="margin-left: 10px">添加诱导屏</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close" />
              </div>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">诱导屏序列号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-checked="{ required: true }"
                  v-model="addSn"
                  placeholder="请输入设备序列号"
                />
              </template>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">诱导屏名称</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="addDeriveName"
                  placeholder="请输入设备名称"
                />
              </template>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">诱导屏类型</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="addDeriveType"
                  placeholder="请输入设备类型"
                />
              </template>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">诱导屏型号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="addDeriveModel"
                  placeholder="请输入设备型号"
                />
              </template>
            </div>
            <div
              class="box-item"
              style="display: flex; justify-content: flex-end"
            >
              <a-button @click="addGuideScreen">确定</a-button>
              <a-button @click="hideAddPages">取消</a-button>
            </div>
          </div>
        </div>
      </template>
      <!--诱导屏录入-编辑页面-->
      <template v-if="showGuideScreenEditView">
        <div class="box">
          <div>
            <div class="box-item" style="justify-content: space-between">
              <div class="flexCommon">
                <div>
                  <a-icon type="align-center" />
                </div>
                <div style="margin-left: 10px">诱导屏编辑</div>
              </div>
              <div class="close" @click="hideAddPages">
                <a-icon type="close" />
              </div>
            </div>
            <div class="box-item">
              <div style="min-width: 100px">序列号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="editGuideScreenSn"
                  :disabled="false"
                  placeholder="序列号"
                />
              </template>
            </div>

            <div
              class="flexCommon"
              style="justify-content: flex-start; margin: 20px 0"
            >
              <div>停车点</div>
              <template>
                <a-select
                  style="margin: 0 50px 0 10px; width: 200px"
                  placeholder="选择停车点"
                  optionFilterProp="children"
                  @select="selectParks"
                  v-model="selectedEditGuideScreen"
                >
                  <a-select-option v-for="p in parks" :key="p.id"
                    >{{ p.parkName }}
                  </a-select-option>
                </a-select>
              </template>
            </div>

            <div class="box-item">
              <div style="min-width: 100px">诱导屏名称</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="editGuideScreenDeviceName"
                  :disabled="false"
                  placeholder="诱导屏名称"
                />
              </template>
            </div>

            <div class="box-item">
              <div style="min-width: 100px">诱导屏类型</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="editGuideScreenDeviceType"
                  :disabled="false"
                  placeholder="诱导屏类型"
                />
              </template>
            </div>

            <div class="box-item">
              <div style="min-width: 100px">诱导屏型号</div>
              <template>
                <a-input
                  style="margin: 0 200px 0 30px"
                  v-model="editGuideScreenDeviceModelCode"
                  :disabled="false"
                  placeholder="诱导屏型号"
                />
              </template>
            </div>

            <div
              class="box-item"
              style="display: flex; justify-content: flex-end"
            >
              <a-button @click="editGuideScreen">确定</a-button>
              <a-button @click="hideAddPages">取消</a-button>
            </div>
          </div>
        </div>
      </template>

      <!--后续可补充其他添加页面-->
    </div>
  </div>
</template>

<script>
/*外部js引入*/
import Constant from "../utils/Constant";
import EquipmentApi from "../api/equipment/EquipmentManage";
import EquipmentModelManageApi from "../api/equipment/EquipmentModelManage";
import CommonApi from "../api/CommonApi";
import ATextarea from "ant-design-vue/es/input/TextArea";
import moment from "moment";
import AddPagesPlusUtils from "../utils/AddPagesPlusUtils";
import CarTypeApi from '../api/system/CarTypeApi';
import GuideScreenManageApi from "../api/equipment/GuideScreenManage";
// import {APIBaseURL} from "../api/BaseApi";

const carTypeColumns = [
  {
    title: "车型ID",
    dataIndex: "id",
    width: "1.5rem",
  },
  {
    title: "车型名称",
    dataIndex: "typeName",
    width: "1.5rem",
  },
  {
    title: "操作",
    dataIndex: "3",
    width: "1.5rem",
    scopedSlots: { customRender: "deleteOperation" },
  },
];
const stairColumns = [
  {
    title: "停车不超（分钟）",
    dataIndex: "minute",
    width: "1.5rem",
  },
  {
    title: "收费（元）",
    dataIndex: "charge",
    width: "1.5rem",
    scopedSlots: { customRender: "chargeSlot" },
  },
  {
    title: "操作",
    dataIndex: "3",
    width: "1.5rem",
    scopedSlots: { customRender: "deleteOperation" },
  },
];

const stairByAvgColumns = [
  {
    title: "时段（分钟）",
    dataIndex: "minute",
    width: "1.5rem",
  },
  {
    title: "收费（元）",
    dataIndex: "charge",
    width: "1.5rem",
    scopedSlots: { customRender: "chargeSlot" },
  },
  {
    title: "操作",
    dataIndex: "3",
    width: "1.5rem",
    scopedSlots: { customRender: "deleteOperation" },
  },
];

const deviceOptions = [];
export default {
  name: "AddPages",
  components: { ATextarea },
  data() {
    return {
      uploading: false,
      addLists: {
        visible: false,
        parksNameList: [],
        parksName:[],
        files:[]
      },
      parksName:[],
      isShowAddPages: false,
      maskClose: true,
      viewType: 0,
      parks: [],
      spaces: [],
      addImei: "",
      editImei: "",
      editData: {},
      selectedPark: 1,
      selectedSpace: 1,
      selectedCommonDeviceImportExcel: undefined,
      commonDeviceImportFileList: [],
      successFunc: undefined,
      carTypeColumns,
      stairColumns,
      stairByAvgColumns,
      carTypeDataSource: [],
      stairDataSource: [],
      stairByAvgDataSource: [],
      currRowData: [],
      tableState: { rowId: -1 },
      nopagination: false,
      addCarTypeName: "",
      addStandardName: "",
      inputDisabled: true,
      inputPark: "",
      inputPlate: "",
      type: [
        { id: 0, name: "白名单", flag: true },
        { id: 1, name: "黑名单", flag: false },
      ],
      valid: [
        { id: 0, name: "已生效", flag: true },
        { id: 1, name: "未生效", flag: false },
      ],
      listType: 0,
      isValid: 0,
      parksId: "",
      startTime: "",
      note: "",
      endTime: "",
      timeScreenCondition: 6,
      parksNameList: [],
      selectParksName: [],
      licencePlate: "",
      inputReson: "",
      inputVersionStr: "",
      textareaUpdateContent: "",
      equipmentModelAdd: false,
      inputEquipmentModel: "",
      callBackData: "",
      equipmentModelCodes: [],
      timeStart: null,
      timeEnd: null,
      selectedEquipmentId: "",
      selectedEquipmentCode: [],
      uploadFileList: [],
      fileList: [],
      /*操作信号，1：新增，2：编辑*/
      operateSign: 0,
      selectModelCode2: [],
      deviceOptions,
      /*view-设备版本*/
      inputEquipmentVersion: "",
      equipmentModels: [],
      // parks: [],
      bindEquipmentModelAttr: [],
      bindParkAttr: [],
      allowClear: true,
      selectEquipmentData: {},
      selectParkData: {},
      inputImei: "",
      id: "",
      parkingMinute: "",
      chargeOfYuan: "",
      //特殊车牌新增/保存
      inputCarOwnerName: "",
      inputPhone: "",

      //    诱导屏部分变量
      addSn: "",
      addDeriveName: "",
      addDeriveType: "",
      addDeriveModel: "",

      selectedEditGuideScreen: 1,
      editId: "",
      editGuideScreenData: "",
      editGuideScreenSn: "",
      editGuideScreenIsValid: "",
      editGuideScreenDeviceName: "",
      editGuideScreenDeviceType: "",
      editGuideScreenDeviceModelCode: "",
      selectId: -1,
      momentArr: [],
      deviceUploadUrl: Constant.TEMPLATEUPLOAD_URL,
      uploadHeaders: {
        authorization: JSON.parse(localStorage.getItem("userinfo")).data,
      }
    };
  },
  methods: {
    handleUpload() {
      const {fileList} = this;

      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('files[]', file);
      });
      formData.append('parksNameList', this.addLists.parksNameList);
      this.uploading = true;
      this.successFunc(formData);
      this.clearData();
      this.hideAddPages();
    },
    importFileList() {
      const fileList = this.commonDeviceImportFileList;
      const packId=this.selectedCommonDeviceImportExcel;
      if (packId === undefined){
        return this.$message.warn("请选择停车点！");
      }
      if (fileList.length ===0){
        return this.$message.warn("请选择导入Excel");
      }
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('excel', file);
      });
      formData.append('parkId', packId);
      EquipmentApi.importCommonDeviceData(formData)
              .then(() => {
                this.$message.success("导入成功");
                $("#commonDeviceMessage").html("");
              })
              .catch((err) => {
                let data = err.data;
                if (data) {
                  $("#commonDeviceMessage").html(data);
                  //return this.$message.warn(data);
                }
              });
      //this.successFunc(formData);
      //清理数据
      this.selectedCommonDeviceImportExcel=undefined;
      this.commonDeviceImportFileList=[];
      //this.hideAddPages();
    },
    /*日期选择*/
    onChange(date) {
      this.selectId = -1;
      this.momentArr = date;
      console.log(date);
    },
    onOk() {
      this.selectId = -1;
    },
    rangePicker() {
      return this.momentArr;
    },
    //保存特殊车牌信息
    savePlateManage() {
      // let inputPlate = this.inputPlate;
      // let inputCarOwnerName = this.inputCarOwnerName;
      // let inputPhone = this.inputPhone;
      // //0 新增 1 编辑 2 非法信号
      // let sign = 0;
      // if (this.showPlateAddView()) {
      //     sign = 0;
      // } else if (this.showPlateEditView) {
      //     sign = 1;
      // } else {
      //     sign = 2;
      // }
    },
    parksNameChange(data) {
      console.log(data);
    },
    addAndEditEquipmentVersion() {
      let deviceSerialNumber = this.inputImei;
      let selectEquipmentData = this.selectEquipmentData;
      let selectParkData = this.selectParkData;
      let versionLast = this.inputEquipmentVersion;
      let errorSign = 0;
      if (deviceSerialNumber == undefined || deviceSerialNumber == "") {
        errorSign = 1;
      } else if (selectParkData == undefined || versionLast == "") {
        errorSign = 1;
      } else if (
        selectEquipmentData == undefined ||
        selectEquipmentData == ""
      ) {
        errorSign = 1;
      } else if (versionLast == undefined || versionLast == "") {
        errorSign = 1;
      }

      if (errorSign == 1) {
        return this.$message.warn("请输入完整信息！");
      }
      let data = {
        operateSign: this.operateSign,
        deviceSerialNumber: deviceSerialNumber,
        deviceTypeId: selectEquipmentData.key,
        parkId: selectParkData.key,
        versionLast: versionLast,
        id: this.id,
      };
      this.successFunc(data);
      this.hideAddPages();
      this.clearData();
    },
    chooseVersionClick() {
      let equipmentModelAttr = this.bindEquipmentModelAttr;
      if (equipmentModelAttr == undefined || equipmentModelAttr == "") {
        return this.$message.warn("请先选择设备型号！");
      }
      AddPagesPlusUtils.showAddPagesPlus(
        Constant.viewTypePlus.GET_VERSION_LIST,
        this.selectEquipmentData,
        this.chooseVersionCallBack
      );
    },
    chooseVersionCallBack(data) {
      this.inputEquipmentVersion = data.version;
    },
    selectPark(value, option) {
      this.selectParkData = { key: option.data.key, value: value };
    },
    selectEquipmentModel(value, option) {
      this.inputEquipmentVersion = "";
      this.selectEquipmentData = { key: option.data.key, value: value };
    },
    addDevice() {
      let data = { imei: this.addImei };
      EquipmentApi.addOneCommonDevice(data)
        .then(() => {
          this.addImei = "";
          this.$message.success("添加成功！");
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },

    addGuideScreen() {
      let data = {
        sn: this.addSn,
        deviceName: this.addDeriveName,
        deviceType: this.addDeriveType,
        deviceModel: this.addDeriveModel,
      };
      GuideScreenManageApi.addOneGuideScreen(data)
        .then(() => {
          this.addSn = "";
          this.addDeriveName = "";
          this.addDeriveType = "";
          this.addDeriveModel = "";
          this.$message.success("添加成功！");
          this.$router.go(0);
          this.isShowAddPages = false;
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },

    editDevice() {
      let data = {
        oldTruckSpaceId: this.editData.truckSpaceId,
        imei: this.editImei,
        newTruckSpaceId: this.selectedSpace,
      };
      EquipmentApi.updateCommonDevice(data)
        .then(() => {
          this.$message.success("修改成功！");
          this.hideAddPages();
          this.successFunc();
        })
        .catch();
    },
    editGuideScreen() {
      let data = {
        id: this.editId,
        sn: this.editGuideScreenSn,
        parkId: this.selectedEditGuideScreen,
        deviceName: this.editGuideScreenDeviceName,
        deviceType: this.editGuideScreenDeviceType,
        deviceModel: this.editGuideScreenDeviceModelCode,
      };
      GuideScreenManageApi.updateGuideScreen(data)
        .then(() => {
          this.$message.success("修改成功！");
          this.hideAddPages();
          this.successFunc();
        })
        .catch();
    },
    addStandard() {
      // 添加收费标准
      // this.operateSign = 1;
      let condition = {
        operateSign: this.operateSign,
        standardName: this.addStandardName,
      };
      // this.successFunc(this.addStandardName);
      this.successFunc(condition);
      this.hideAddPages();
      this.addStandardName = "";
    },
    addCarTypeClick() {
      let carTypeName = this.addCarTypeName;
      if (carTypeName == undefined || carTypeName == "") {
        return this.$message.warn("请填写车型名称！");
      }
      let condition = { typeName: carTypeName };
      CarTypeApi.addCarType(condition)
        .then((data) => {
          let returnData = data.data;
          let id = returnData.id;
          let typeName = returnData.typeName;
          this.carTypeDataSource.push({ id: id, typeName: typeName });
          this.addCarTypeName = "";
          this.$message.success("添加成功！");
        })
        .catch((err) => {
          let data = err.data;
          let msg = err.msg;
          if (data) {
            return this.$message.warn(data);
          }
          if (msg) {
            return this.$message.warn(msg);
          }
        });
    },

    selectType(value) {
      if (value == "白名单") {
        this.listType = 0;
      } else {
        this.listType = 1;
      }
    },
    selectValid(value) {
      if (value == "已生效") {
        this.isValid = 0;
      } else {
        this.isValid = 1;
      }
    },
    deleteCarType(record) {
      let id = record.id;
      let condition = { id: id };
      CarTypeApi.delCarType(condition)
        .then(() => {
          let filter = this.carTypeDataSource.filter((x) => x.id != id);
          this.carTypeDataSource = filter;
          return this.$message.success("删除成功！");
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },
    deleteStair(record) {
      let filter = this.stairDataSource.filter((x) => x.id != record.id);
      this.stairDataSource = filter;
    },
    deleteStairByAvg(record) {
      let filter = this.stairByAvgDataSource.filter((x) => x.id != record.id);
      this.stairByAvgDataSource = filter;
    },
    saveStairsClick() {
      let stairDataSource = this.stairDataSource;
      this.successFunc(stairDataSource);
      this.clearData();
      this.hideAddPages();
    },
    saveStairsByAvgClick() {
      let stairByAvgDataSource = this.stairByAvgDataSource;
      this.successFunc(stairByAvgDataSource);
      this.clearData();
      this.hideAddPages();
    },
    addStairClick() {
      let parkingMinute = this.parkingMinute;
      let chargeOfYuan = this.chargeOfYuan * 100;
      let stairDataSource = this.stairDataSource;
      let length = stairDataSource.length;
      let index = 0;
      if (length > 0) {
        index = stairDataSource[length - 1].id + 1;
      }
      stairDataSource.push({
        minute: parkingMinute,
        charge: chargeOfYuan,
        id: index,
      });
      this.parkingMinute = "";
      this.chargeOfYuan = "";
    },
    addStairByAvgClick() {
      let parkingMinute = this.parkingMinute;
      let chargeOfYuan = this.chargeOfYuan * 100;
      let stairByAvgDataSource = this.stairByAvgDataSource;
      let length = stairByAvgDataSource.length;
      let index = 0;
      if (length > 0) {
        index = stairByAvgDataSource[length - 1].id + 1;
      }
      stairByAvgDataSource.push({
        minute: parkingMinute,
        charge: chargeOfYuan,
        id: index,
      });
      this.parkingMinute = "";
      this.chargeOfYuan = "";
    },
    addBlackPlate() {
      let inputPlate = this.inputPlate;
      let inputReson = this.inputReson;
      if (
        inputPlate === undefined ||
        inputReson === undefined ||
        inputReson === "" ||
        inputPlate === ""
      ) {
        return this.$message.warn("车牌号和添加原因不能为空！");
      }
      let data = { inputPlate: inputPlate, inputReson: inputReson };
      this.successFunc(data);
      this.clearData();
      this.hideAddPages();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    addWhiteList() {
      let beginMoment = this.momentArr[0];
      let endMoment = this.momentArr[1];
      if (beginMoment != undefined && endMoment != undefined) {
        this.startTime = new Date(beginMoment).getTime();
        this.endTime = new Date(endMoment).getTime();
        this.timeScreenCondition = 6;
      }
      let licencePlate = this.licencePlate;
      let isValid = this.isValid;
      let startTime = this.timestampToTime(this.startTime);
      let endTime = this.timestampToTime(this.endTime);
      let parksNameList = this.selectParksName;
      let listType = this.listType;
      let note = this.note;
      if (licencePlate === undefined || licencePlate === "") {
        return this.$message.warn("车牌号不能为空！");
      }
      if (isValid === undefined || isValid === "") {
        return this.$message.warn("是否有效不能为空！");
      }
      if (
        startTime === undefined ||
        endTime === undefined ||
        startTime === "" ||
        endTime === ""
      ) {
        return this.$message.warn("时间不能为空！");
      }
      if (parksNameList === undefined || parksNameList === "") {
        return this.$message.warn("停车点不能为空！");
      }
      if (listType === undefined || listType === "") {
        return this.$message.warn("名单类型不能为空！");
      }
      let data = {
        listType: listType,
        parksNameList: parksNameList,
        isValid: isValid,
        licencePlate: licencePlate,
        startTime: startTime,
        endTime: endTime,
        note: note,
      };
      console.log(data);
      this.successFunc(data);
      this.clearData();
      this.hideAddPages();
    },
    handleRemove(file) {
      const index = this.uploadFileList.indexOf(file);
      const newFileList = this.uploadFileList.slice();
      newFileList.splice(index, 1);
      this.uploadFileList = newFileList;
    },
    handleRemove2(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    handleRemove3(file) {
      const index = this.commonDeviceImportFileList.indexOf(file);
      const newFileList = this.commonDeviceImportFileList.slice();
      newFileList.splice(index, 1);
      this.commonDeviceImportFileList = newFileList;
    },
    beforeUpload(file) {
      this.uploadFileList = [...this.uploadFileList, file];
      return false;
    },
    beforeUpload2(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    beforeUpload3(file) {
      this.commonDeviceImportFileList = [...this.commonDeviceImportFileList, file];
      return false;
    },
    addAndUpdateUploadVersion() {
      let fileList = this.uploadFileList;
      let equipmentId = this.selectModelCode2;
      this.selectedEquipmentId = equipmentId;
      let filter = this.deviceOptions.filter((x) => {
        return x.value == equipmentId;
      });
      let prefix = "";
      if (filter.length > 0) {
        prefix = filter[0].label;
      }
      // let downloadUri = "";
      let saveDownloadUri = "";
      if (
        this.operateSign == 1 &&
        (fileList == undefined || fileList.length == 0)
      ) {
        return this.$message.warn("请添加上传文件！");
      } else if (equipmentId == undefined || equipmentId == "") {
        return this.$message.warn("请选择设备型号！");
      } else if (
        this.inputVersionStr == undefined ||
        this.inputVersionStr == ""
      ) {
        return this.$message.warn("请输入设备版本号！");
      }
      let versionStr = this.inputVersionStr;
      saveDownloadUri = "download/" + prefix + "/" + versionStr;
      // fileList.forEach((x) => {
      //   //文件上传名称：download+型号+版本号+文件名  例如：download/px001/0.0.1/xxx.txt
      //   downloadUri += saveDownloadUri + "/" + x.name + ",";
      // });

      if (fileList != undefined && fileList.length != 0) {
        let uploadFileObject = {
          fileList: fileList,
          prefix: saveDownloadUri,
        };
        this.doCallBackFuncOfVersion(
          saveDownloadUri,
          fileList,
          uploadFileObject
        );
      } else {
        this.doCallBackFuncOfVersion(saveDownloadUri, fileList);
      }
    },
    doCallBackFuncOfVersion(downloadUri, fileList, uploadFileObject) {
      let fileNames = fileList
        .map((x) => {
          return x.name;
        })
        .join(",");

      let callBackData = this.callBackData;
      let addData = {
        id: callBackData ? callBackData.id : "",
        sign: this.operateSign,
        version: this.inputVersionStr,
        downloadUri: downloadUri,
        deviceTypeId: this.selectedEquipmentId,
        updateContent: this.textareaUpdateContent,
        forbidUpdateStart:
          this.timeStart == null ? null : this.timeStart.format("HH:mm"),
        forbidUpdateEnd:
          this.timeEnd == null ? null : this.timeEnd.format("HH:mm"),
        softwareType: "0",
        uploadFileNames: fileNames,
        uploadFileObject: uploadFileObject,
      };
      //回调
      this.successFunc(addData);
      this.hideAddPages();
    },
    clearData() {
      this.uploadFileList = [];
      this.inputVersionStr = "";
      this.textareaUpdateContent = "";
      this.timeStart = null;
      this.timeEnd = null;
      this.selectedEquipmentId = "";
      this.selectedEquipmentCode = [];
      this.inputReson = "";
      this.inputPlate = "";
      this.inputEquipmentModel = "";
      this.inputImei = "";
      this.selectEquipmentData = "";
      this.selectParkData = "";
      this.inputEquipmentVersion = "";
      this.bindParkAttr = [];
      this.bindEquipmentModelAttr = "";
      this.deviceOptions = [];
      this.listType=0;
      this.isValid=0;
      this.parksId="";
      this.startTime="";
      this.note="";
      this.momentArr="";
      this.endTime="";
      this.timeScreenCondition= 6;
      this.parksNameList=[];
      this.selectParksName=[];
      this.licencePlate="";
      this.uploading = false;
      $("#commonDeviceMessage").html("");
    },
    /*表格*/
    tableCustomRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          },
        },
      };
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },
    /*下拉框*/
    /*初始化刷新停车点列表*/
    flushParks() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
        })
        .catch(() => {});
    },
    flushTruckSpace(condition) {
      this.spaces = [];
      this.selectedSpace = [];
      CommonApi.getTruckSpaceList(condition)
        .then((data) => {
          this.spaces = data.data.truckSpaceModelList;
        })
        .catch((err) => console.log("error:", err));
    },
    flushequipmentModelCodes() {
      return EquipmentModelManageApi.getDeviceTypeList()
        .then((data) => {
          return Promise.resolve((this.equipmentModelCodes = data.data));
        })
        .catch((err) => {
          console.log("获取设备型号数据异常！", err);
        });
    },
    initParks() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
        })
        .catch((err) => {
          console.log("error:", err);
        });
    },
    initEquipmentModels() {
      EquipmentModelManageApi.getDeviceTypeList()
        .then((data) => {
          this.equipmentModels = data.data;
        })
        .catch((err) => {
          console.log("获取设备型号数据异常！", err);
        });
    },
    /*选择停车点*/
    selectParks(value) {
      let condition = { id: value, freeImei: "1" };
      this.flushTruckSpace(condition);
    },
    /*选择车位号*/
    selectSpace() {},
    /*选择执行者*/
    selectWorker() {},
    /*车型数据*/
    initCarTypeData() {
      CarTypeApi.getCarTypeList()
        .then((data) => {
          this.carTypeDataSource = data.data;
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },
    initParkList() {
      CommonApi.getParkList()
        .then((data) => {
          this.parksName = data.data;
        })
        .catch((err) => {
          console.log("error:", err);
        });
    },
    selectModelCode(value, option) {
      this.selectedEquipmentId = value;
      this.selectedEquipmentCode =
        option.componentOptions.children[0].text.trim();
    },
    selectChanged(value, option) {
      if (value != undefined && value != "") {
        this.selectedEquipmentId = value;
        this.selectedEquipmentCode =
          option.componentOptions.children[0].text.trim();
      } else {
        this.selectedEquipmentId = "";
        this.selectedEquipmentCode = "";
      }
    },
    addEquipmentModel() {
      let data = this.inputEquipmentModel;
      if (data == undefined || data == "") {
        return this.$message.warn("请填写设备型号！");
      }
      let callBackData = {
        sign: this.viewType == Constant.viewType.EQUIPMENT_MODEL_ADD ? 1 : 2,
        equipmentModel: data,
      };
      this.successFunc(callBackData);
      this.clearData();
      this.hideAddPages();
    },

    /*点击遮罩层*/
    maskTap() {
      if (!this.maskClose) return;
      this.hideAddPages();
    },
    /*隐藏遮罩层*/
    hideAddPages() {
      this.isShowAddPages = false;
      this.clearData();
    },
    /*防止子类点击事件被穿透*/
    addPagesTap() {},
    doThis() {},
    /*回调显示弹框*/
    showAddPagesView(viewType, data, func) {
      if (
        viewType == Constant.viewType.COMMONDEVICE_ADD ||
        viewType == Constant.viewType.COMMONDEVICE_EDIT
      ) {
        //停车点列表刷新 1,2
        this.flushParks();
        if (data != undefined) {
          this.editData = data;
          this.editImei = this.editData.imei;
          let pid = this.editData.parkId;
          // let spaceId = this.editData.truckSpaceId;
          this.selectedPark = pid == "" || isNaN(pid) ? [] : parseInt(pid);
          //刷新车位列表
          let condition = { id: pid, freeImei: "1" };
          this.flushTruckSpace(condition);
        }
        this.selectedSpace = "选择车位号";
      }if (viewType == Constant.viewType.COMMON_DEVICE_IMPORT_EXCEL) {//批量导入弹窗
        //停车点列表初始化
        this.flushParks();
        //每次弹窗清理选中数据
        this.selectedCommonDeviceImportExcel=undefined;
        this.commonDeviceImportFileList=[];
        $("#commonDeviceMessage").html("");
      } else if (viewType == Constant.viewType.GUIDE_SCREEN_EDIT) {
        //停车点列表刷新 1,2
        this.flushParks();
        this.editGuideScreenData = data;
        this.editId = this.editGuideScreenData.id;
        this.editGuideScreenSn = this.editGuideScreenData.sn;
        this.editGuideScreenIsValid = this.editGuideScreenData.isValid;
        this.editGuideScreenDeviceName = this.editGuideScreenData.deviceName;
        this.editGuideScreenDeviceType = this.editGuideScreenData.deviceType;
        this.editGuideScreenDeviceModelCode =
          this.editGuideScreenData.deviceModelCode;
        let pid = this.editGuideScreenData.park_id;
        this.selectedEditGuideScreen =
          pid == "" || isNaN(pid) ? [] : parseInt(pid);
      } else if (viewType == Constant.viewType.BLACKLIST_ADD) {
        if (data != undefined) {
          this.inputPlate = data.licencePlate;
        }
      } else if (viewType == Constant.viewType.UPLOAD_VERSION_FILE) {
        //刷新设备类型列表 11
        this.flushequipmentModelCodes().then(() => {
          if (data != null && data != undefined && data != "") {
            let deviceTypeId = data.deviceTypeId;
            let modelCode = "";
            this.selectModelCode2 = deviceTypeId;
            this.selectedEquipmentId = deviceTypeId;
            this.inputVersionStr = data.version;
            this.textareaUpdateContent = data.updateContent;
            this.timeStart =
              data.forbidUpdateStart == undefined ||
              data.forbidUpdateStart == ""
                ? null
                : moment(data.forbidUpdateStart, "HH:mm");
            this.timeEnd =
              data.forbidUpdateEnd == undefined || data.forbidUpdateEnd == ""
                ? null
                : moment(data.forbidUpdateEnd, "HH:mm");
            this.selectedEquipmentCode = modelCode;
          }
          let equipmentModelCodes = this.equipmentModelCodes;
          equipmentModelCodes.forEach((x) => {
            let item = { value: x.id, label: x.modelCode };
            this.deviceOptions.push(item);
          });
        });
      } else if (
        viewType == Constant.viewType.EQUIPMENT_VERSION_ADD ||
        viewType == Constant.viewType.EQUIPMENT_VERSION_EDIT
      ) {
        //15,16
        this.initParks();
        this.initEquipmentModels();
        if (data != undefined && data != "") {
          this.inputImei = data.deviceSerialNumber;
          this.inputEquipmentVersion = data.versionLast;
          this.bindEquipmentModelAttr = data.modelCode;
          let parkName = data.parkName;
          this.bindParkAttr =
            parkName == "" || parkName == undefined ? [] : parkName;
          this.selectEquipmentData = {
            key: data.deviceTypeId,
            value: data.modelCode,
          };

          this.selectParkData = { key: data.parkId, value: data.parkName };
          this.id = data.id;
        }
      } else if (viewType == Constant.viewType.CARTYPE_ADD) {
        //5
        this.addCarTypeName = "";
      }
      //收费标准编辑或者添加 huangxin
      else if (
        viewType == Constant.viewType.STANDARD_ADD ||
        viewType == Constant.viewType.STANDARD_EDIT
      ) {
        //3,4
        if (data != undefined && data != "") {
          this.addStandardName = data.standardName;
          this.operateSign = 2;
        } else {
          this.operateSign = 1;
        }
      } else if (viewType == Constant.viewType.STAIRS) {
        if (data && data.data && data.data != "") {
          let split = data.data.split(";");
          let map = split.map((x, index) => {
            let stairs = x.split(",");
            return { minute: stairs[0], charge: stairs[1], id: index };
          });
          this.stairDataSource = map;
        } else {
          this.stairDataSource = [];
        }
      }
      this.callBackData = data;
      this.successFunc = func;
      this.viewType = viewType;
      this.isShowAddPages = true;
    },
  },
  mounted() {
    window.addPagesControl = this;
    this.initParkList();
  },
  destroyed() {
    delete window.addPagesControl;
  },
  computed: {
    computedShow() {
      return this.isShowAddPages ? "display: block;" : "display: none;";
    },
    computedPagesStyle() {
      return this.viewType == Constant.viewType.UPLOAD_VERSION_FILE
        ? "width:770px"
        : "";
    },
    /*---------------判断显示的页面---------------*/
    /*诱导屏新增页面*/
    showGuideScreenAddView() {
      let guide_screen_bool =
        this.viewType == Constant.viewType.GUIDE_SCREEN_ADD;
      return guide_screen_bool;
    },

    /*诱导屏编辑页面*/
    showGuideScreenEditView() {
      let guide_screen_edit =
        this.viewType == Constant.viewType.GUIDE_SCREEN_EDIT;
      return guide_screen_edit;
    },

    /*月卡编辑页面*/
    showMonthCardEditView() {
      let month_card_edit = this.viewType == Constant.viewType.MONTH_CARD_EDIT;
      return month_card_edit;
    },

    /*设备新增页面*/
    showCommonDeviceAddView() {
      let bool_add = this.viewType == Constant.viewType.COMMONDEVICE_ADD;
      return bool_add;
    },
    /*设备编辑页面*/
    showCommonDeviceEditView() {
      let bool_edit = this.viewType == Constant.viewType.COMMONDEVICE_EDIT;
      return bool_edit;
    },
    /*设备编辑页面*/
    showCommonDeviceImportExcelView() {
      return  this.viewType == Constant.viewType.COMMON_DEVICE_IMPORT_EXCEL;
    },
    /*收费规则添加页面*/
    showStandardAddView: {
      get: function () {
        let bool_add =
          this.viewType == Constant.viewType.STANDARD_ADD ||
          this.viewType == Constant.viewType.STANDARD_EDIT;
        return bool_add;
      },
      set: function () {
        // let bool_add = this.viewType == Constant.viewType.STANDARD_ADD || this.viewType == Constant.viewType.STANDARD_EDIT;
        let callBackData = this.callBackData;
        if (callBackData != undefined && callBackData != "") {
          this.addStandardName = callBackData.standardName;
          this.operateSign = 2;
        } else {
          this.operateSign = 1;
        }
        // return bool_add;
      },
      //    let bool_add = this.viewType == Constant.viewType.STANDARD_ADD || this.viewType == Constant.viewType.STANDARD_EDIT;
      //     let callBackData = this.callBackData;
      //     if (callBackData != undefined && callBackData != '') {
      //         this.addStandardName = callBackData.standardName;
      //         this.operateSign = 2;
      //     } else {
      //         this.operateSign = 1;
      //     }

      //     return bool_add;
    },
    showCarTypeEditView() {
      let bool = this.viewType == Constant.viewType.CARTYPE_ADD;
      if (bool) {
        //获取车型列表数据
        this.initCarTypeData();
      }
      return bool;
    },
    showStairsView: {
      get: function () {
        let bool = this.viewType == Constant.viewType.STAIRS;
        return bool;
      },
      set: function () {
        let bool = this.viewType == Constant.viewType.STAIRS;
        if (bool) {
          let callBackData = this.callBackData;
          if (callBackData && callBackData.data && callBackData.data != "") {
            let split = callBackData.data.split(";");
            let map = split.map((x, index) => {
              let stairs = x.split(",");
              return { minute: stairs[0], charge: stairs[1], id: index };
            });
            this.stairDataSource = map;
          } else {
            this.stairDataSource = [];
          }
        }
        return bool;
      },
      // let bool = this.viewType == Constant.viewType.STAIRS;
      // if (bool) {
      //     let callBackData = this.callBackData;
      //     if (callBackData && callBackData.data && callBackData.data != "") {
      //         let split = callBackData.data.split(";");
      //         let map = split.map((x, index) => {
      //             let stairs = x.split(",");
      //             return {minute: stairs[0], charge: stairs[1], id: index}
      //         });
      //         this.stairDataSource = map;
      //     } else {
      //         this.stairDataSource = []
      //     }
      // }
      // return bool;
    },

    showStairsByAvgView: {
      get: function () {
        let bool = this.viewType == Constant.viewType.STAIRSBYAVG;
        return bool;
      },
      set: function () {
        let bool = this.viewType == Constant.viewType.STAIRSBYAVG;
        if (bool) {
          let callBackData = this.callBackData;
          if (callBackData && callBackData.data && callBackData.data != "") {
            let split = callBackData.data.split(";");
            let map = split.map((x, index) => {
              let stairs = x.split(",");
              return { minute: stairs[0], charge: stairs[1], id: index };
            });
            this.stairByAvgDataSource = map;
          } else {
            this.stairByAvgDataSource = [];
          }
        }
        return bool;
      },
    },

    showPlateAddView() {
      let bool = this.viewType == Constant.viewType.PLATE_ADD;
      return bool;
    },
    showPlateEditView() {
      let bool = this.viewType == Constant.viewType.PLATE_EDIT;
      return bool;
    },
    showDispatchView() {
      let bool = this.viewType == Constant.viewType.DISPATCH;
      return bool;
    },
    showplateUpdateView() {
      let bool = this.viewType == Constant.viewType.PLATE_UPDATE;
      return bool;
    },
    showBlacklistAddView() {
      let bool = this.viewType == Constant.viewType.BLACKLIST_ADD;
      return bool;
    },
    showWhiteListAddView() {
      let bool = this.viewType == Constant.viewType.WHITELIST_ADD;
      return bool;
    },
    showWhiteListBitchAddView(){
      let bool = this.viewType == Constant.viewType.WHITELIST_BITCH_ADD;
      return bool;
    },
    showUploadVersionFileView: {
      get: function () {
        let bool = this.viewType == Constant.viewType.UPLOAD_VERSION_FILE;
        return bool;
      },
      set: function () {
        let bool = this.viewType == Constant.viewType.UPLOAD_VERSION_FILE;
        if (this.callBackData == undefined || this.callBackData == "") {
          this.operateSign = 1;
        } else {
          this.operateSign = 2;
        }
        return bool;
      },
    },
    showEquipmentModelView: {
      get: function () {
        let bool = this.viewType == Constant.viewType.EQUIPMENT_MODEL_ADD;
        let bool2 = this.viewType == Constant.viewType.EQUIPMENT_MODEL_EDIT;
        return bool || bool2;
      },
      set: function () {
        let bool = this.viewType == Constant.viewType.EQUIPMENT_MODEL_ADD;
        // let bool2 = this.viewType == Constant.viewType.EQUIPMENT_MODEL_EDIT;
        this.equipmentModelAdd = bool;
        this.inputEquipmentModel = this.callBackData;
        // return bool || bool2;
      },
    },
    showEquipmentVersionView: {
      get: function () {
        let bool = this.viewType == Constant.viewType.EQUIPMENT_VERSION_ADD;
        let bool2 = this.viewType == Constant.viewType.EQUIPMENT_VERSION_EDIT;
        return bool || bool2;
      },
      set: function () {
        // let bool = this.viewType == Constant.viewType.EQUIPMENT_VERSION_ADD;
        // let bool2 = this.viewType == Constant.viewType.EQUIPMENT_VERSION_EDIT;
        if (this.callBackData == undefined || this.callBackData == "") {
          this.operateSign = 1;
        } else {
          this.operateSign = 2;
        }
        // return bool || bool2;
      },
    },
  },
};
</script>

<style>
.box-addPages {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 5;
}

.clickRowStyl {
  background-color: #c1e0fd;
}

.addPages {
  width: 570px;
  padding-bottom: 20px;
  background: #fff;
  border-radius: 10px;

  position: fixed;
  left: 25%;
  top: 15%;
  /*transform: translate(-50%, -50%);*/
  /* flex */
  display: flex;
  align-items: center;
  flex-direction: column;
}

/*设备录入-添加页面  相关样式*/
.box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.box .box-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px;
}

.box .box-item button {
  margin-left: 10px;
}

.flexCommon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.viewHead {
  min-width: 5.7rem;
}

.viewHead2 {
  min-width: 7.7rem;
}

.viewBody {
  min-width: 5.7rem;
}

.viewBody2 {
  min-width: 7.7rem;
}

.viewTail {
  min-width: 5.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.viewTail button {
  margin: 0 10px 0 0;
}

.viewHead .viewItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.viewHead2 .viewItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.viewHead .viewItem .flexCommon {
  margin-left: 5px;
}

.viewHead .viewItem .close {
  justify-self: flex-end;
  margin-right: 5px;
}

.viewHead2 .viewItem .close {
  justify-self: flex-end;
  margin-right: 5px;
}

.viewBody .viewItem {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.viewBody2 .viewItem {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  margin: 10px 10px 10px 200px;
}

.viewItem .ant-input {
  width: 2rem;
  margin: 0 10px 0 0;
}

.viewItem textarea {
  width: 2.1rem;
  min-height: 90px;
}

.itemText {
  width: 0.8rem;
}

.itemText2 {
  width: 1.3rem;
}

.viewItem .ant-time-picker {
  margin: 0 0.2rem;
}

.itemText1 {
  width: 1.8rem;
}
</style>
